<!DOCTYPE html>
<html>
<head>
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>音乐播放控制</title>
    <link rel="stylesheet" href="/assets/css/element.css">
    <script src="/assets/js/vue.js"></script>
    <script src="/assets/js/element.js"></script>
    <script src="/assets/js/axios.min.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .voice-control {
            height: 100vh;
            padding: 10px 10px 0;
            box-sizing: border-box;
            display: flex;
            flex-direction: column;
            justify-content: space-around;
        }
        .btn-top-box{
            display: flex;
        }
    </style>
</head>

<body>
<div id="app">
    <div class="voice-control">
        <div class="btn-top-box">
            <el-button type="success" @click="playClick" icon="el-icon-video-play">播放</el-button>
            <el-button type="warning" @click="stopClick" icon="el-icon-video-pause">停止</el-button>
            <el-upload ref="replaceUploader" action="/upload" style="margin-left: 10px"
                       :show-file-list="false" :on-success="handleUploadSuccess"
                       :on-error="handleUploadError" :before-upload="beforeAvatarUpload">
                <el-button type="primary" icon="el-icon-upload">点击上传</el-button>
            </el-upload>
        </div>
        <el-table :data="tableData" border style="width: 100%;flex: 1;margin-top: 10px;" height="auto">
            <el-table-column :label="'音乐名称 （共' + tableData.length + '条）'">
                <template slot-scope="scope">
                    {{ scope.row.fileName }}
                </template>
            </el-table-column>
            <el-table-column label="操作" width="100">
                <template slot-scope="scope">
                    <el-button @click="delClick(scope.row)" type="danger" icon="el-icon-delete">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <div v-loading.fullscreen.lock="isLoading"></div>
    </div>
</div>
</body>

<script>
    new Vue({
        el: '#app',
        data() {
            return {
                tableData: [],
                isLoading: true
            }
        },
        created() {
            this.isLoading = true
            this.getFileList()
        },
        methods: {
            // 获取文件列表
            async getFileList() {
                this.isLoading = true
                axios.get('/list').then(({data}) => {
                    this.isLoading = false;
                    if (data.success) {
                        this.tableData = data.data;
                    } else {
                        this.$message({message: data.message, type: 'warning'});
                    }
                });
            },
            // 播放按钮
            playClick() {
                this.isLoading = true
                axios.get('/play').then(({data}) => {
                    this.isLoading = false;
                    this.$message({message: data.message, type: data.success ? 'success' : 'error'});
                });
            },
            // 暂停按钮
            stopClick() {
                this.isLoading = true
                axios.get('/stop').then(({data}) => {
                    this.isLoading = false;
                    this.$message({message: data.message, type: data.success ? 'success' : 'error'});
                });
            },
            // 删除某一项
            delClick(item) {
                this.isLoading = true
                axios.get('/del?fileName=' + item.fileName).then(({data}) => {
                    this.isLoading = false;
                    if (data.success) {
                        const pitchIndex = this.tableData.findIndex(t => t.fileName === item.fileName);
                        this.tableData.splice(pitchIndex, 1);
                    }
                    this.$message({message: data.message, type: data.success ? 'success' : 'error'});
                });
            },
            // 上传文件限制--只能上传mp3格式的文件
            beforeAvatarUpload(file) {
                this.isLoading = true
                let testmsg = file.name.substring(file.name.lastIndexOf('.') + 1)
                if (testmsg !== 'mp3' && testmsg !== 'wav') {
                    this.$message({message: "上传文件只能是mp3格式！", type: 'error'})
                    this.isLoading = false
                    return false
                } else return true

            },
            handleUploadSuccess(res) {
                this.isLoading = false
                this.$message({message: '上传成功！',type: 'success' })
                this.getFileList()
            },
            handleUploadError(err){
                this.isLoading = false
                this.$message({message: '上传失败！',type: 'error' })
            }
        }
    })
</script>
</html>